<script setup lang="ts">
import { IconPath } from '@/common/constants'

withDefaults(
  defineProps<{
    /**
     * 按钮大小
     * @default base
     */
    size: 'sm' | 'base'
    /**
     * 按钮背景色
     * @default primary
     */
    bgColor: 'grey' | 'primary'
  }>(),
  {
    size: 'base',
    bgColor: 'primary',
  },
)
</script>

<template>
  <button
    open-type="share"
    class="share" :class="{
      'share--sm': size === 'sm',
      'share--grey': bgColor === 'grey',
    }"
  >
    <image class="share-icon" :src="IconPath.SHARE_LIGHT" mode="scaleToFill" />
  </button>
</template>

<style scoped lang="scss">
.share {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color-primary;
  width: 78rpx;
  height: 78rpx;
  border-radius: 50%;

  &--sm {
    width: 65rpx;
    height: 65rpx;
  }

  &--grey {
    background-color: $bg-black-opacity-3;
  }

  &-icon {
    height: 50%;
    width: 50%;
  }
}
</style>
